<template lang="">
  <div>
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.order_number" type="number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 流水号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.serial_number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 客户 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.customer_id"
                filterable
                placeholder="请选择客户"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in CustomerList"
                  :key="index"
                  :label="item.customer_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.product_id"
                filterable
                multiple
                @change="product_id_change"
                placeholder="请选择产品"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in productList"
                  :key="index"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.model_number_id"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单日期范围 </el-col>
            <el-col :span="16">
              <el-date-picker
                v-model="order_data"
                @change="order_data_change"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-button @click="search(0)" class="add_btn" icon="el-icon-search"
            >查询</el-button
          >
          <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn"
            >重置</el-button
          >
          <el-button
            @click="search(2)"
            icon="el-icon-plus"
            class="add_btn"
            v-permission="['dingdan_daochu']"
            >导出</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="ChildList"
      style="width: 100%"
      v-loading="loading"
      header-cell-class-name="header_style"
      border
    >
      <el-table-column prop="id" label="ID" width="60"> </el-table-column>
      <el-table-column prop="order_number" label="订单号" width="80">
      </el-table-column>
      <el-table-column prop="serial_number" label="流水号" width="80">
      </el-table-column>
      <el-table-column prop="serial_number" label="客户名称" width="100">
        <template slot-scope="scope">
          {{ scope.row.customer ? scope.row.customer.customer_name : "" }}
        </template>
      </el-table-column>

      <!-- <el-table-column prop="order_date" label="业务员" width="80">
        <template slot-scope="scope">
          {{ scope.row.account_executive.company_name }}
        </template>
      </el-table-column> -->

      <el-table-column prop="order_date" label="产品名称" width="80">
        <template slot-scope="scope">
          {{ scope.row.product ? scope.row.product.product_name : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="order_date" label="型号" width="80">
        <template slot-scope="scope">
          {{
            scope.row.model_number ? scope.row.model_number.model_number : ""
          }}
        </template>
      </el-table-column>
      <!-- <el-table-column  label="型号图片" width="80">
        <template slot-scope="scope">
          <img :src="uploadImgUrl+scope.row.model_number.file.file_url" @click="push_img(scope.row)"  style="cursor: pointer;display:block;width:60px;display: block;margin: 0 auto;" v-if="scope.row.model_number.file!=null"/>
          <img src="../../../src/assets/zwtp.jpg" style="width:60px;display: block;margin: 0 auto;"  v-else/> 
        </template>
      </el-table-column> -->
      <el-table-column label="规格" width="80">
        <template slot-scope="scope">
          {{
            scope.row.specification ? scope.row.specification.specification : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="direction" label="方向" width="80">
      </el-table-column>

      <el-table-column label="颜色" width="80">
        <template slot-scope="scope">
          {{ scope.row.color ? scope.row.color.color : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="250">
      </el-table-column>
      <el-table-column label="紧急程度" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.emergency_procedure == 1" style="color: #333"
            >普通</span
          >
          <span
            v-if="scope.row.emergency_procedure == 2"
            style="color: #1890ff; font-weight: bold"
            >紧急</span
          >
          <span
            v-if="scope.row.emergency_procedure == 3"
            style="color: #ff0000; font-weight: bold"
            >十万火急</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="order_date"
        label="下单日期"
        :formatter="formatterTime"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="delivery_date"
        label="交货日期"
        :formatter="formatterTime"
        width="100"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  getOrderListByEmployeeCardNumnber,
  getOrderList,
  downloadcode,
  getProductList,
  getModelNumberList,
  getCustomerList,
} from "@/api/product/index";

export default {
  data() {
    return {
      loading: true,
      order_data: "",
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      dataList: [],
      parent_username: "",
      user_id: "",
      ser: {
        serial_number: "",
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      },
      CustomerList: [],
      productList: [],
      ModelNumberList: [],
    };
  },
  mounted() {
    this.getproduct();
    this.getCustomer();
    this.user_id = JSON.parse(this.$route.query.data);
    this.parent_username = this.$store.getters.userInfo.parent_username;
    console.log(this.parent_username);
    console.log(this.user_id);
    this.get_OrderListByEmployeeCardNumnber(this.parent_username, this.user_id);
  },
  methods: {
    product_id_change(val) {
      console.log(val);
      this.ModelNumberList = [];
      this.ser.model_number_id = "";
      this.get_producModel(val);
    },
    get_producModel(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,
        file: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    // 客户列表
    getCustomer() {
      getCustomerList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },
    get_OrderListByEmployeeCardNumnber(parent_username, user_id) {
      let obj = {
        parent_username,
        user_id,
        ...this.pagination,
      };
      getOrderListByEmployeeCardNumnber(obj).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    // 指定查询
    search(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      if (this.ser.product_id == "") {
        this.$message.error("请选择产品");
        return false;
      }
      getOrderList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          if (type == 2) {
            if (res.data.data.length > 0) {
              this.$message.success("正在导出订单列表");
              this.exports_w();
            }
          }
        }
      });
    },
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },
    // 导出
    exports_w() {
      let data = {
        ...this.ser,
        export: 1,
      };
      downloadcode(data).then((res) => {
        //创建一个隐藏的a连接，
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "订单信息";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      });
    },
    searchreset() {
      this.ser = {
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      };
      this.getlist();
    },
  },
};
</script>
<style lang=""></style>
